<template>
  <component
    :is="sideBarComponent"
    v-if="!getIsHidden"
    :full-path="fullPath"
    :item="item"
    :show-route="showRoute"
  >
    <template v-if="item.children && item.children.length !== 0">
      <ly-side-bar-item
        v-for="child of item.children"
        :key="child.path"
        :full-path="generatorPath(child.path)"
        :item="child"
      />
    </template>
  </component>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import * as path from "path";
import { isExternal } from "@/utils/utils.js";
@Component({
  name: "LySideBarItem",
  components: {},
})
export default class LySideBarItem extends Vue {
  //#region vue prop =================================
  @Prop({
    type: String,
    default: "",
  })
  fullPath: string;
  @Prop({
    type: Object,
    default: () => {
      return {};
    },
  })
  item: any;

  //#endregion

  //#region vue data =================================
  private showRoute: any;
  //#endregion
  //#region computed getter =================================
  get sideBarComponent() {
    if (this.isSubMenu()) {
      return "LySubMenuItem";
    }
    return "LyMenuItem";
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LySideBarItem " + "created");
  }

  mounted() {
    console.log("LySideBarItem " + "mounted");
  }

  beforeDestroy() {
    console.log("LySideBarItem " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================
  get getIsHidden() {
    //改造点，将原有的hidden 层级调整为外侧、meta中，都可以
    if (this.item.hidden) return true;
    if (this.item.meta && this.item.meta.hidden) return true;
    return false;
  }
  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private isSubMenu() {
    this.item.children = this.item.children || [];
    const showRoutes = this.item.children.filter((it) => {
      if (it.hidden || it.meta.hidden) {
        return false;
      } else {
        this.showRoute = it;
        return true;
      }
    });
    if (showRoutes.length === 1) {
      return false;
    }
    if (showRoutes.length === 0) {
      this.showRoute = {
        ...this.item,
        path: "",
        noChildren: true,
      };
      return false;
    }
    return true;
  }
  private generatorPath(childPath: string) {
    if (isExternal(childPath)) {
      return childPath;
    }
    if (isExternal(this.fullPath)) {
      return childPath;
    }
    return path.resolve(this.fullPath, childPath);
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped></style>
